<script setup>
import { ref, watchEffect } from "vue";
import * as echarts from "echarts";
import { assign } from "lodash-es";

const props = defineProps([
  "xData",
  "series",
  "grid",
  "color",
  "legend",
  "yUnit",
]);
const chartRef = ref(null);

watchEffect(() => {
  if (!chartRef.value) return;
  const chart = echarts.init(chartRef.value);

  const option = {
    color: props.color,
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      // confine: true,
      // extraCssText:
      //   "background: rgba(7,68,124,0.5);border: 1px solid #2D80FF;border-radius: 4px;padding: 4px 10px;box-sizing: border-box;",
      // formatter: function (param) {
      //   return (
      //     `<span style='color:#fff;font-size:12px'>${param.name}</span>` +
      //     `<div style=" width: 76px;border: 1px solid;border-image: linear-gradient(rgba(0, 178, 238, 0),rgba(0, 178, 238, 0.5),rgba(0, 178, 238, 0))1 1;}"></div>` +
      //     `<span style='color: #4BFFF5;font-size: 16px;font-weight: bold;'>${param.value}<span>`
      //   );
      // },
    },
    grid: assign(
      {
        top: 33,
        bottom: 28,
        left: 40,
        right: 10,
      },
      props.grid
    ),
    legend: assign(
      {
        top: 0,
        right: 0,
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
          color: "rgba(201, 233, 248, 0.80)",
          fontSize: 10,
        },
      },
      props.legend
    ),
    xAxis: {
      type: "category",
      data: props.xData,
      axisTick: {
        show: false,
      },
      axisLabel: {
        show: true,
        interval: 0,
        textStyle: { color: "rgba(201, 233, 248, 0.60)" },
      },
      axisLine: {
        lineStyle: {
          color: "#3D4985",
        },
      },
    },
    yAxis: [
      {
        name: "",
        type: "value",
        axisTick: { show: false },
        axisLabel: {
          show: true,
          textStyle: { color: "rgba(201, 233, 248, 0.60)" },
          formatter: (val) => {
            return props.yUnit ? `${val}${props.yUnit}` : val;
          },
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: "#3D4985",
            fontSize: "12px",
            fontWeight: 400,
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
            color: "#3D4985",
          },
        },
      },
    ],
    series: props.series.map((v,index) => (
      {
        ...v,
        itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: props.color[index] },   // 起始颜色
          { offset: 1, color: echarts.color.modifyAlpha(props.color[index], 0.1) }    // 结束颜色
        ]),
      },
      }
    )),
  };

  chart.setOption(option);
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 100%"></div>
</template>
